<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非受控组件</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>


    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">  /*此处一定要写babel*/
       //创建组件
       class Login extends React.Component{
        handleSubmit=(event)=>{
            event.preventDefault()//阻止表单的提交
            const {username,password} = this;
            alert(`用户名:${username.value},密码:${password.value}`)
        }

           render(){
               return(
                   <form  onSubmit={this.handleSubmit}>
                        用户名：<input ref={c=>this.username=c} type="text" name="userName"/>
                        密码:<input ref={c=>this.password=c} type="password" name="password"/>
                        <button>登录</button>
                    </form>
               )
           }
       }

       ReactDOM.render(<Login/>,document.getElementById('test'))

    </script>
</body>

</html>